<template>
  <div id="addressComponent">
    <group :label-align="titleAlign">
      <x-address
        :title="titleTxt"
        raw-value
        v-model="addressId"
        :list="addressData"
        :placeholder="placeholder"
        :value-text-align="valueAlign"
        @on-shadow-change="onShadowChange"
        @on-hide='getAddress'
      ></x-address>
    </group>
  </div>
</template>

<script>
import { Group, XAddress } from "vux";
import addressList from '@/assets/json/china_address.json';

export default {
  props: {
    //左边对齐方式
    titleAlign: {
      type: String,
      default: "left"
    },
    //右边对齐方式
    valueAlign: {
      type: String,
      default: "left"
    },
    //左边的内容
    titleTxt: {
      type: String,
      default: "出生地点"
    },
    // 默认占位信息
    placeholder: {
      type: String,
      default: '请选择地址'
    },
    address:{
      type:Array,
      default:function(){
        return [];
      }
    }
  },
  components: {
    XAddress,
    Group
  },
  data: function() {
    return {
      addressId: this.address,
      addressData: addressList,
      addressNameArr:null
    };
  },
  watch:{
    address:function(val){
      this.addressId = val;
    }
  },
  methods: {
    onShadowChange(ids, names) {
      this.addressNameArr = names;
      // this.$emit('getAddress',names)
    },
    getAddress:function(val){
      if(val){
        this.$emit('getAddress',this.addressNameArr)
      }

    }
  }
};
</script>

<style lang="less">
#addressComponent {
  .weui-cells {
    padding: 0;
    &:after {
      border-bottom: none;
    }
    &:before {
      border-top: none;
    }
    .weui-cell_access:active {
      background: transparent;
    }
    .weui-cell {
      padding: 20px 0;
      .weui-cell__hd {
        width: 120px;
        margin-right: 30px;
      }
    }
    .vux-cell-value{
      color: #333;
    }
  }
}

.vux-popup-dialog {
  .vux-popup-picker-container {
    .vux-popup-header {
      height: 88px;
      line-height: 88px;
      .vux-popup-header-right {
        color: #fdc46f;
      }
    }
    .vux-picker {
      .scroller-component {
        height: 476px;
        .scroller-mask {
          background-size: 100% 204px;
        }
        .scroller-indicator {
          height: 68px;
          top: 204px;
          background-image: none;
        }
        .scroller-content {
          .scroller-item {
            height: 68px;
            line-height: 68px;
          }
        }
      }
    }
  }
}
</style>